﻿@{var _ = new WYJWeb.Models.Role();}

<div class="fitem_auto padding_H" id="Root">
    <div v-show="msg" class="msgbox_alert">{{msg}}</div>
    <div v-show="active">
        <buttonlist :hook="hooks[0]" :set="sets[0]" class="wyjcontainer_H border_B padding_V"></buttonlist>
        <pagenation :hook="hooks[1]" :set="listMain" api="role" hasToolbar="Api">
            <template #toolbar="postData">
                <input placeholder="请输入角色名称" v-model="postData.queryKeys.key" />
            </template>
            <template #td="models">
                <td><a class="tooltip" @@click="Switch(3, models.model)">{{models.model.Name}}<span class="tooltiptext">查看详情</span></a></td>
                <td>{{models.model.Note}}</td>
                <td>
                    <a v-for="(btn,i) in icons" :key="i" :class="btn.class" @@click="btn.act(models.model)"><i :class="btn.icon"></i></a>
                </td>
            </template>
        </pagenation>
    </div>
    <div v-show="!active" class="exclusive wyjcontainer_V">
        <buttonlist :hook="hooks[2]" :set="sets[1]" class="wyjcontainer_HL border_B padding_V">
        </buttonlist>
        <editor :hook="hooks[3]" :set="labels">
            <template v-if="viewMode" #ele>
                <div class="formGroup_ele" v-for="(y,x) in labels">{{model[x]}}</div>
            </template>
            <template v-else #ele="slotProps">
                <input class="formGroup_ele" v-model="model.Name" placeholder="请输入角色名称" />
                <input class="formGroup_ele" v-model="model.Note" placeholder="请输入备注" />
            </template>
            <template #subtmpl>
                <p>权限列表：</p>
                @*<ul>
            @foreach (var menu in WYJWeb.ConsoleCenter.Menus)
            {
                var tmpl = @"
                        <li >
                            <label class = 'checkbox' @click = 'selectPower'>
                                <input type='checkbox' NodeId={0} />{3}
                            </label>
                            <ul >{4}</ul>
                        </li>
                    ";
                @Html.Raw(menu.Raw(tmpl));
            }
        </ul>*@
                <ul>
                    <tree v-for="node in nodes" :key="node.NodeId" :hook="node.Description" :set="node" ></tree>
                </ul>
            </template>
        </editor>
        <buttonlist :hook="hooks[4]" :set="sets[2]" class="wyjcontainer_HM padding_V border_T"></buttonlist>
    </div>
</div>

@section foot {
    <script type="text/javascript">
        var app = new App({
            Api: 'role',
            listMain: {
                titles: ["角色名称", "备注", "操作"]
            },
            PageTitles: ['管理角色', '新增角色', '编辑角色', '查看角色'],
            icons: [{
                icon:'fa fa-trash',
                act: (e, i) => {
                    app.DeleteById(e.Id, i)
                }
            }, {
                icon:'fa fa-pencil-square-o',
                act: (e) => {
                    app.Switch(2, e);
                    
                }
            }],
            labels: {
                Name: '角色名称',
                Note: '备注'
            },
            nodes:@Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(WYJWeb.ConsoleCenter.Menus)),
        });
        app.BeforeSave = function (model) {
            model.Powers = Store.getShare('Checked').join(',')
            console.log(model);
            return model;
        };
        app.BeforeSwitch = function (model) {
            if (model) Store.setShare('Checked', model.powers);
            else Store.setShare('Checked', []);
        }

    </script>
}